<template>
  <el-dialog :visible.sync="dialogTableVisible" v-loading="loadingSave" :append-to-body="true" :lock-scroll="false" :title="isEdit?'Edit':'Create'" width="900px" @close="handleCloseDetailDialog">
    <el-form ref="postForm" :model="postForm" :rules="rules" label-position="left" label-width="100px" style="margin-left:50px;">
      <!-- <el-form-item :label="$t('table.area')" required prop="area">
        <el-select v-model="postForm.area" class="filter-item" placeholder="Please select">
          <el-option v-for="(item, index) in areaOptions" :key="index" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item> -->

      <!-- <el-form-item :label="$t('table.available')" prop="is_available" required>
        <el-radio-group v-model="postForm.is_available">
          <el-radio :label="1">{{ $t('table_element.available.on') }}</el-radio>
          <el-radio :label="0">{{ $t('table_element.available.un') }}</el-radio>
        </el-radio-group>
      </el-form-item> -->
      <!-- <el-form-item :label="$t('table.logo')" prop="logo" >
        <el-col :span="20">
          <el-upload
            :headers="header"
            :show-file-list="false"
            :on-success="handleImagesSuccess"
            :action="getUploadImageUrl()"
            class="avatar-uploader"
            name = "img">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"/>
          </el-upload>
          <el-input v-model="postForm.logo" type="hidden"/>
        </el-col>
      </el-form-item> -->
      <template>
        <el-tabs v-model="activeName">
          <el-tab-pane label="en" name="first" >
            <el-form-item :label="$t('table.title')" required prop="en_name">
              <el-input v-model="postForm.en_name" name="en_name" />
            </el-form-item>
            <el-form-item :label="$t('articlefiles.keyword')">
              <el-input v-model="postForm.en_keyword" name="en_keyword" />
            </el-form-item>
            <el-form-item :label="$t('webconfigfiles.description')" >
              <el-input v-model="postForm.en_description" name="en_description" type="textarea"/>
            </el-form-item>
            <el-form-item :label="$t('webconfigfiles.address')" >
              <el-input v-model="postForm.en_address" name="en_address" type="textarea"/>
            </el-form-item>
            <el-form-item :label="$t('webconfigfiles.footer')" >
              <el-input v-model="postForm.en_footer" name="en_footer" type="textarea"/>
            </el-form-item>
            <el-form-item :label="$t('webconfigfiles.contact')" >
              <el-input v-model="postForm.en_contact" name="en_contact" type="textarea"/>
            </el-form-item>
            <el-form-item :label="$t('webconfigfiles.og_title')" >
              <el-input v-model="postForm.en_og_title" name="en_og_title" />
            </el-form-item>
             <el-form-item :label="$t('webconfigfiles.og_type')" >
              <el-input v-model="postForm.en_og_type" name="en_og_type" />
            </el-form-item>
             <el-form-item :label="$t('webconfigfiles.og_url')" >
              <el-input v-model="postForm.en_og_url" name="en_og_url" />
            </el-form-item>
            <el-form-item :label="$t('webconfigfiles.og_image')" >
              <el-col :span="20">
                <el-upload
                  :headers="header"
                  :show-file-list="false"
                  :on-success="handleImagesSuccess"
                  :action="getUploadImageUrl()"
                  class="avatar-uploader"
                  name = "img">
                  <img v-if="en_ogImageUrl" :src="en_ogImageUrl" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"/>
                </el-upload>
                <el-input v-model="postForm.en_og_image" type="hidden"/>
              </el-col>
            </el-form-item>
          </el-tab-pane>
          <el-tab-pane label="zh-ch" name="second">
            <el-form-item :label="$t('table.title')">
              <el-input v-model="postForm.cn_name" name="cn_name" />
            </el-form-item>
            <el-form-item :label="$t('articlefiles.keyword')">
              <el-input v-model="postForm.cn_keyword" name="cn_keyword" />
            </el-form-item>
            <el-form-item :label="$t('webconfigfiles.og_title')" >
              <el-input v-model="postForm.cn_og_title" name="cn_og_title" />
            </el-form-item>
             <el-form-item :label="$t('webconfigfiles.og_type')" >
              <el-input v-model="postForm.cn_og_type" name="cn_og_type" />
            </el-form-item>
             <el-form-item :label="$t('webconfigfiles.og_url')" >
              <el-input v-model="postForm.cn_og_url" name="cn_og_url" />
            </el-form-item>
            <el-form-item :label="$t('webconfigfiles.og_image')" >
              <el-col :span="20">
                <el-upload
                  :headers="header"
                  :show-file-list="false"
                  :on-success="handleImagesSuccess"
                  :action="getUploadImageUrl()"
                  class="avatar-uploader"
                  name = "img">
                  <img v-if="cn_ogImageUrl" :src="cn_ogImageUrl" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"/>
                </el-upload>
                <el-input v-model="postForm.cn_og_image" type="hidden"/>
              </el-col>
            </el-form-item>
          </el-tab-pane>
          <el-tab-pane label="zh-hk" name="third">
            <el-form-item :label="$t('table.title')">
              <el-input v-model="postForm.hk_name" name="hk_name" />
            </el-form-item>
            <el-form-item :label="$t('articlefiles.keyword')">
              <el-input v-model="postForm.hk_keyword" name="hk_keyword" />
            </el-form-item>
            <el-form-item :label="$t('webconfigfiles.og_title')" >
              <el-input v-model="postForm.hk_og_title" name="hk_og_title" />
            </el-form-item>
             <el-form-item :label="$t('webconfigfiles.og_type')" >
              <el-input v-model="postForm.cn_og_type" name="hk_og_type" />
            </el-form-item>
             <el-form-item :label="$t('webconfigfiles.og_url')" >
              <el-input v-model="postForm.hk_og_url" name="hk_og_url" />
            </el-form-item>
            <el-form-item :label="$t('webconfigfiles.og_image')" >
              <el-col :span="20">
                <el-upload
                  :headers="header"
                  :show-file-list="false"
                  :on-success="handleImagesSuccess"
                  :action="getUploadImageUrl()"
                  class="avatar-uploader"
                  name = "img">
                  <img v-if="hk_ogImageUrl" :src="hk_ogImageUrl" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"/>
                </el-upload>
                <el-input v-model="postForm.hk_og_image" type="hidden"/>
              </el-col>
            </el-form-item>
          </el-tab-pane>
          <el-tab-pane label="zh-tw" name="fourth">
            <el-form-item :label="$t('table.title')">
              <el-input v-model="postForm.tw_name" name="tw_name" />
            </el-form-item>
            <el-form-item :label="$t('articlefiles.keyword')">
              <el-input v-model="postForm.tw_keyword" name="tw_keyword" />
            </el-form-item>
            <el-form-item :label="$t('webconfigfiles.og_title')" >
              <el-input v-model="postForm.tw_og_title" name="tw_og_title" />
            </el-form-item>
             <el-form-item :label="$t('webconfigfiles.og_type')" >
              <el-input v-model="postForm.tw_og_type" name="tw_og_type" />
            </el-form-item>
             <el-form-item :label="$t('webconfigfiles.og_url')" >
              <el-input v-model="postForm.tw_og_url" name="tw_og_url" />
            </el-form-item>
             <el-form-item :label="$t('webconfigfiles.og_image')" >
              <el-col :span="20">
                <el-upload
                  :headers="header"
                  :show-file-list="false"
                  :on-success="handleImagesSuccess"
                  :action="getUploadImageUrl()"
                  class="avatar-uploader"
                  name = "img">
                  <img v-if="tw_ogImageUrl" :src="tw_ogImageUrl" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"/>
                </el-upload>
                <el-input v-model="postForm.tw_og_image" type="hidden"/>
              </el-col>
            </el-form-item>
          </el-tab-pane>
        </el-tabs>
      </template>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleCloseDetailDialog">{{ $t('table.cancel') }}</el-button>
      <el-button type="primary" @click="submitForm('postForm')">{{ $t('table.submit') }}</el-button>
    </div>
  </el-dialog>

</template>
<script>

import webconfigApi from '@/api/webset/webconfig'
import { getUploadImageUrl } from '@/utils'
import i18n from '@/lang/index'
import { getToken } from '@/utils/auth'

const defaultForm = {
  en_name: '',
  en_description: '',
  en_address: '',
  en_footer: '',
  en_contact: '',
  en_og_title: '',
  en_og_type: '',
  en_og_url: '',
  en_og_image: '',

  hk_name: '',
  hk_description: '',
  hk_address: '',
  hk_footer: '',
  hk_contact: '',
  hk_og_title: '',
  hk_og_type: '',
  hk_og_url: '',
  hk_og_image: '',

  cn_name: '',
  cn_description: '',
  cn_address: '',
  cn_footer: '',
  cn_contact: '',
  cn_og_title: '',
  cn_og_type: '',
  cn_og_url: '',
  cn_og_image: '',

  tw_name: '',
  tw_description: '',
  tw_address: '',
  tw_footer: '',
  tw_contact: '',
  tw_og_title: '',
  tw_og_type: '',
  tw_og_url: '',
  tw_og_image: '',

  is_available: 0,
  area: '',
  logo: ''
}

export default {
  name: 'Detail',
  data() {
    return {
      activeName: 'first',
      postForm: Object.assign({}, defaultForm),
      header:{
        'X-Token': getToken()
      },
      rules: {
        area: [{ required: true, message: 'Area is required', trigger: 'change' }],
        en_name: [{ required: true, message: 'Company Name is required', trigger: 'blur' }]
      },
      areaList: [],
      imageUrl: '',
      isEdit: false,
      recordid: 0,
      dialogTableVisible: false,
      en_ogImageUrl: '',
      cn_ogImageUrl: '',
      hk_ogImageUrl: '',
      tw_ogImageUrl: '',
      pidList: [],
      loadingSave: false
    }
  },
  computed: {
    lang() {
      return this.$store.getters.language
    },
    areaOptions: function() {
      return this.$store.state.locale.areas
    }
  },
  created() {
    if (this.isEdit) {
      const id = this.editId || (this.$route.params && this.$route.params.id)
      this.showRecord(id)
    } else {
      this.postForm = Object.assign({}, defaultForm)
    }
  },

  mounted() {

  },

  methods: {
    showRecord(id) {
      webconfigApi.showRecord(id).then(response => {
        const serviceResponse = response.data
        if (serviceResponse.code === 0) {
          this.postForm = Object.assign({}, this.postForm, serviceResponse.data.record)
          this.postForm.lang = i18n.locale,
          this.imageUrl = this.postForm.logo.indexOf('http')==0 ? this.postForm.logo : this.postForm.imageDomain + this.postForm.logo
          this.en_ogImageUrl = this.postForm.en_og_image.indexOf('http')==0 ? this.postForm.en_og_image : this.postForm.imageDomain + this.postForm.en_og_image
          this.cn_ogImageUrl = this.postForm.cn_og_image.indexOf('http')==0 ? this.postForm.cn_og_image : this.postForm.imageDomain + this.postForm.cn_og_image
          this.hk_ogImageUrl = this.postForm.hk_og_image.indexOf('http')==0 ? this.postForm.hk_og_image : this.postForm.imageDomain + this.postForm.hk_og_image
          this.tw_ogImageUrl = this.postForm.tw_og_image.indexOf('http')==0 ? this.postForm.tw_og_image : this.postForm.imageDomain + this.postForm.tw_og_image
        }
      }).catch(err => {
        console.log(err)
      })
    },

    handleCreateRecord() {
      const params = {
        lang: i18n.locale
      }
      webconfigApi.createRecord(params).then(response => {
        const serviceResponse = response.data
        if (serviceResponse.code === 0) {
          this.pidList = []
        }
      }).catch(err => {
        console.log(err) 
      })
    },

    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loadingSave = true
          if (this.editId > 0) {
            webconfigApi.updateRecord(this.editId, this.postForm).then(response => {
              const serviceResponse = response.data
              if (serviceResponse.code === 0) {
                this.reflashCahe()
                this.handleCloseDetailDialog()
              } else {
                this.loadingSave = false
                this.$message({
                  message: 'error',
                  type: 'error'
                })
              }
            })
          } else {
            webconfigApi.storeRecord(this.postForm).then(response => {
              const serviceResponse = response.data
              if (serviceResponse.code === 0) {
                this.$message({
                  message: 'success',
                  type: 'success'
                })
                this.loadingSave = false
                this.handleCloseDetailDialog()
              } else {
                this.loadingSave = false
                this.$message({
                  message: 'error',
                  type: 'error'
                })
              }
            })
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    reflashCahe(){
      var iframe = document.createElement('iframe')
      let _this = this
      iframe.src=process.env.REFLASH_API
      iframe.style.display='none'
      iframe.onload = function () {
        _this.handleCloseDetailDialog()
        _this.$message({
          message: 'success',
          type: 'success'
        })
        _this.loadingSave = false
        iframe.remove()
      }
      document.body.appendChild(iframe)
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    getUploadImageUrl() {
      return getUploadImageUrl()
    },
    handleImagesSuccess(res, file) {
      if (res.code === 0) {
        if (this.activeName === 'first') {
          this.postForm.en_og_image = res.data.paths[0].path
          this.en_imageUrl = (res.data.paths[0].path.indexOf('http')==0) ? res.data.paths[0].path : res.data.imageDomain + '/' + res.data.paths[0].path
        }
        if (this.activeName === 'second') {
          this.postForm.cn_og_image = res.data.paths[0].path
          this.cn_imageUrl = (res.data.paths[0].path.indexOf('http')==0) ? res.data.paths[0].path : res.data.imageDomain + '/' + res.data.paths[0].path
        }
        if (this.activeName === 'third') {
          this.postForm.hk_og_image = res.data.paths[0].path
          this.hk_imageUrl = (res.data.paths[0].path.indexOf('http')==0) ? res.data.paths[0].path : res.data.imageDomain + '/' + res.data.paths[0].path
        }
        if (this.activeName === 'fourth') {
          this.postForm.tw_og_image = res.data.paths[0].path
          this.tw_imageUrl = (res.data.paths[0].path.indexOf('http')==0) ? res.data.paths[0].path : res.data.imageDomain + '/' + res.data.paths[0].path
        } else {
          this.postForm.logo = res.data.paths[0].path
          this.imageUrl = (res.data.paths[0].path.indexOf('http')==0) ? res.data.paths[0].path : res.data.imageDomain + '/' + res.data.paths[0].path
        }
      } else {
        alert(res.data.msg)
      }
    },
    handShowDetailDialog(id) {
      if (id > 0) {
        this.isEdit = true
        this.editId = id
        this.showRecord(id)
      } else {
        this.isEdit = false
        this.editId = 0
        this.handleCreateRecord()
        this.postForm = Object.assign({}, defaultForm)
      }

      this.dialogTableVisible = true
    },
    handleCloseDetailDialog() {
      this.resetForm('postForm')
      this.editId = 0
      this.$emit('indexRecord')
      this.activeName = 'first'
      this.imageUrl = ''
      this.dialogTableVisible = false
    }
  }

}
</script>
<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    max-width: 178px;
    max-height: 178px;
    display: block;
  }
</style>
